{% extends "base.html" %}

{% block content %}
  <div class="container-fluid p-4">
    <div class="row">
      <!-- 仪表盘统计卡片 -->
      <div class="col-md-3 mb-4">
        <div class="card bg-primary text-white p-4 rounded-lg">
          <div class="d-flex justify-content-between align-items-center">
            <h6 class="mb-0">总用户数</h6>
            <i class="fa fa-users fa-2x opacity-50"></i>
          </div>
          <h3 class="mt-2">1,286</h3>
          <p class="mb-0 text-sm">较上月增长 12.5%</p>
        </div>
      </div>
      <div class="col-md-3 mb-4">
        <div class="card bg-success text-white p-4 rounded-lg">
          <div class="d-flex justify-content-between align-items-center">
            <h6 class="mb-0">今日订单</h6>
            <i class="fa fa-file-text-o fa-2x opacity-50"></i>
          </div>
          <h3 class="mt-2">36</h3>
          <p class="mb-0 text-sm">较昨日增长 8.2%</p>
        </div>
      </div>
      <div class="col-md-3 mb-4">
        <div class="card bg-warning text-white p-4 rounded-lg">
          <div class="d-flex justify-content-between align-items-center">
            <h6 class="mb-0">产品总数</h6>
            <i class="fa fa-shopping-bag fa-2x opacity-50"></i>
          </div>
          <h3 class="mt-2">89</h3>
          <p class="mb-0 text-sm">新增 3 款新品</p>
        </div>
      </div>
      <div class="col-md-3 mb-4">
        <div class="card bg-danger text-white p-4 rounded-lg">
          <div class="d-flex justify-content-between align-items-center">
            <h6 class="mb-0">今日营收</h6>
            <i class="fa fa-money fa-2x opacity-50"></i>
          </div>
          <h3 class="mt-2">¥28,650</h3>
          <p class="mb-0 text-sm">目标完成率 78%</p>
        </div>
      </div>

      <!-- 仪表盘图表区域 -->
      <div class="col-md-8 mb-4">
        <div class="card p-4 rounded-lg border">
          <h5 class="mb-3">近30天订单趋势</h5>
          <div class="bg-light p-3 rounded">
            <p class="text-center text-secondary">（此处可嵌入 ECharts/Chart.js 图表）</p>
          </div>
        </div>
      </div>
      <div class="col-md-4 mb-4">
        <div class="card p-4 rounded-lg border">
          <h5 class="mb-3">订单状态分布</h5>
          <div class="bg-light p-3 rounded text-center">
            <p class="text-secondary">（此处可嵌入饼图）</p>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}